<template>
  <div>
    <el-checkbox :indeterminate="isIndeterminate"
                 v-model="checkAll"
                 @change="handleCheckAllChange">全选</el-checkbox>
    <div style="margin: 15px 0;"></div>
    <el-checkbox-group v-model="checkedIds"
                       @change="handleCheckedIdsChange">
      <el-checkbox v-for="item in options"
                   :label="item"
                   :key="item">{{item}}</el-checkbox>
    </el-checkbox-group>
    <el-input type="textarea"
              :rows="8"
              placeholder="请输入内容"
              v-model="textarea">
    </el-input>
    <el-button type="primary"
               @click="handleSend">发送</el-button>
    <div>返回数据：{{msg}}</div>
  </div>

</template>

<script>
import { getTagInfo, sendData } from '@/api/data'
// import { strToHexCharCode } from '@/utils'

export default {
  name:'dataSize',
  data() {
    return {
      checkAll: false,
      checkedIds: [],
      options: [],
      isIndeterminate: false,
      textarea: '',
      msg: '',
    }
  },
  methods: {
    initWebsocket() {
      if ('WebSocket' in window) {
        this.websocket = new WebSocket('ws://'+process.env.VUE_APP_BASE_API.substr(7)+'/websocket')
      } else {
        alert('Not support websocket')
      }
      //连接发生错误的回调方法
      this.websocket.onerror = this.websocketOnError

      //连接成功建立的回调方法
      this.websocket.onopen = this.websocketOnOpen

      //接收到消息的回调方法
      this.websocket.onmessage = this.websocketOnMessage

      this.websocket.onclose = this.websocketOnClose
      // //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
      // window.onbeforeunload = function() {
      //   this.websocket.close()
      // }
    },
    websocketOnError() {
      console.log('WebSocket连接发生错误')
    },
    websocketOnOpen(e) {
      console.log('WebSocket连接成功')
      console.log(e)
    },
    websocketOnMessage(e) {
      if (e.data.length >= 5) {
        let r = JSON.parse(e.data)

        if (r.code !== 0) {
          console.log(r)
          this.msg=r
        }
      }
    },
    websocketOnClose() {
      console.log('websocket成功断开')
      this.websocket.close()
    },
    handleCheckAllChange(val) {
      this.checkedIds = val ? this.options : []
      this.isIndeterminate = false
    },
    handleCheckedIdsChange(value) {
      let checkedCount = value.length
      this.checkAll = checkedCount === this.options.length
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.options.length
    },
    handleSend() {
      let params = {
        tagId: this.checkedIds.join(','),
        mode: '0',
        data: this.textarea
      }

      sendData(params).then(r => {
        console.log(r)
      })
    }
  },
  created() {
    getTagInfo().then(r => {
      r.tags.forEach(item => {
        // let obj = new Object()
        // obj.value = item.id
        // obj.label = item.id
        this.options.push(item.id)
      })
    })
    this.initWebsocket()
  }
}
</script>

<style lang='scss' scoped>
</style>